<template>
  <span>
    <el-button type="primary" @click="show = true">{{text}}</el-button>
    <el-dialog :title="text" width="60%" :visible.sync="show" modal-append-to-body append-to-body>
      <div class="thumbs">
        <vue-preview :slides="thumbsList" class="imgPrev"></vue-preview>
      </div>

    </el-dialog>

  </span>
</template>
<script>
  import Vue from 'vue';
  import VuePreview from 'vue-preview';
  Vue.use(VuePreview);
  export default {
    props:{
      text: {
        type: String,
        default: '图片预览'
      },
      list:{
        type: Array,
        default: () => {
          return []
        }
      }
    },
    data(){
      return{
        show: false,
        thumbsList: this.list,
      }
    },
    watch:{
      list(val){
        this.thumbsList = val
      }
    },

  }
</script>
<style lang="scss" scoped>

  .thumbs {
    /deep/ .my-gallery{   //deep深层作用选择器
      display: flex;
      flex-wrap:wrap;//默认换行
      figure{
        width: 23%;
        margin: 5px;
        img{
          width: 100%;
          height: 120px;
          box-shadow: 0 0 8px #999;
          border-radius: 5px;
        }
      }
    }
  }

</style>
